<template>
	<view class="fav-page">
		<view v-if="list.length===0" class="empty">还没有收藏的商品～</view>
		<view v-else>
			<view class="shop-hd">
				<label class="ck">
					<checkbox :checked="allChecked" @click.stop="toggleAll" />
					<text class="ck-text">全选</text>
				</label>
				<text class="shop-name">海D捞精选</text>
			</view>
			<view class="list">
				<view class="item" v-for="f in list" :key="f.id" @click="goDetail(f.productId)">
					<label class="ck" @click.stop="toggle(f)">
						<checkbox :checked="checkedMap[f.productId]===true" />
					</label>
					<image class="pic" :src="getImageUrl(productMap[f.productId]?.coverImage)" mode="aspectFill" />
					<view class="meta">
						<text class="title">{{ productMap[f.productId]?.title || '商品' }}</text>
					</view>
					<button class="op" @click.stop="removeSingle(f)">取消收藏</button>
				</view>
			</view>
		</view>

		<view v-if="list.length>0" class="bar">
			<label class="ck">
				<checkbox :checked="allChecked" @click.stop="toggleAll" />
				<text class="ck-text">全选</text>
			</label>
			<view class="ops">
				<button class="op danger" @click="removeSelected" :disabled="selectedIds.length===0">移除</button>
			</view>
		</view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data(){
		return { list: [], productMap: {}, checkedMap:{} }
	},
	onShow(){ this.fetch(); },
	computed:{
		selectedIds(){ return this.list.filter(f=>this.checkedMap[f.productId]).map(f=>f.productId); },
		allChecked(){ return this.list.length>0 && this.list.every(f=>this.checkedMap[f.productId]===true); }
	},
	methods:{
		async fetch(){
			const r = await api.getFavorites();
			if(r.code===0){
				this.list = r.data||[];
				// 可选：批量拉取商品信息，这里简单逐个请求
				const map = {};
				for(const fav of this.list){
					try { const pr = await api.getProduct(fav.productId); if(pr.code===0) map[fav.productId]=pr.data; } catch {}
					if(this.checkedMap[fav.productId]===undefined){ this.$set(this.checkedMap, fav.productId, false); }
				}
				this.productMap = map;
			}
		},
		goDetail(pid){ uni.navigateTo({ url:`/pages/product/detail?id=${pid}` }); },
		toggle(f){ this.$set(this.checkedMap, f.productId, !this.checkedMap[f.productId]); },
		toggleAll(){ const v = !this.allChecked; for(const fav of this.list){ this.$set(this.checkedMap, fav.productId, v); } },
		async removeSingle(f){ const r = await api.removeFavorite(f.productId); if(r.code===0){ this.fetch(); } },
		async removeSelected(){ const ids = this.selectedIds; if(ids.length===0){ uni.showToast({icon:'none', title:'未选择'}); return; } for(const pid of ids){ try{ await api.removeFavorite(pid); }catch{} } this.fetch(); },
		getImageUrl(url) {
			if (!url) return '/static/logo.png';
			if (url.startsWith('http')) return url;
			return BASE_URL + url;
		}
	}
}
</script>

<style>
.fav-page{ padding-bottom: 220rpx; }
.empty{ text-align:center; color:#888; padding: 40rpx 0; }
.shop-hd{ display:flex; align-items:center; justify-content: space-between; padding: 12rpx 16rpx; color:#333; }
.shop-name{ font-weight:600; }
.list{ display:flex; flex-direction: column; gap: 12rpx; padding: 0 16rpx; }
.item{ display:flex; align-items:center; gap: 16rpx; background:#fff; border-radius: 16rpx; padding: 16rpx; box-shadow: 0 6rpx 20rpx rgba(0,0,0,.05); }
.ck{ display:flex; align-items:center; gap: 8rpx; }
.ck-text{ color:#666; }
.pic{ width: 140rpx; height: 140rpx; background:#fafafa; border-radius: 12rpx; }
.meta{ flex:1; }
.title{ font-size: 28rpx; color:#333; }
.op{ border: 2rpx solid #ff7a45; color:#ff7a45; background:#fff; border-radius: 999rpx; font-size: 24rpx; padding: 8rpx 20rpx; }
.bar{ position: fixed; left:0; right:0; bottom: calc(100rpx + env(safe-area-inset-bottom)); background:#fff; padding: 14rpx 16rpx; box-shadow: 0 -6rpx 20rpx rgba(0,0,0,.05); display:flex; align-items:center; gap: 12rpx; }
.ops{ margin-left:auto; }
.op.danger{ border: 2rpx solid #f56c6c; color:#f56c6c; }
</style>

